<template>
  <div id="login">
    <mt-header title="登录">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <div class="content">
      <span class="logo">
        <img src="../assets/logo.png" alt="" />
      </span>
    </div>

    <mt-field
      label="+86"
      type="text"
      placeholder="请输入手机号"
      v-model="name"
      @blur.native.capture="checkName"
      :state="nameState"
    />
    <mt-field
      label="密码"
      type="text"
      placeholder="请输入密码"
      v-model="pwd"
      @blur.native.capture="checkPwd"
      :state="pwdState"
    />
    <mt-button type="primary" size="large" @click="checkForm">
      快速登录
    </mt-button>
    <router-link to="/">
      <mt-button type="danger" size="large">立即注册</mt-button>
    </router-link>

    <div class="user-action">
      <router-link to="/" class="use-email"
        >使用邮箱登录&emsp;&emsp;</router-link
      >
      <span class="line"></span>
      <router-link to="/" class="forget-pwd"
        >&nbsp;&emsp;&emsp;&emsp;忘记密码</router-link
      >
    </div>
    <div class="login-type">
      <p class="title">其他方式登录</p>
      <div class="type">
        <router-link to="/" class="type-icon">
          <img src="../assets/wb.png" alt="" />
        </router-link>
        <router-link class="type-icon" to="/">
          <img src="../assets/qq.png" alt="" />
        </router-link>
        <router-link class="type-icon" to="/">
          <img src="../assets/weixin.png" alt="" />
        </router-link>
      </div>
    </div>
    <div class="user-agreement">
      点击登录代表同意本平台的
      <a href="#">用户协议</a>
      和
      <a href="#">隐私政策</a>
    </div>
    <br>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
      nameState: "",
      pwd: "",
      pwdState: "",
    };
  },
  methods: {
    checkForm() {
      if (this.checkName() && this.checkPwd()) {
        console.log("验证通过，执行登录");
      }
    },

    checkPwd() {
      let exp = /^\d{6}$/;
      if (exp.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },

    checkName() {
      let exp = /^\w{3,10}$/;
      if (exp.test(this.name)) {
        this.nameState = "success";
        return true;
      } else {
        this.nameState = "error";
        return false;
      }
    },
  },
};
</script>

<style lang="scss">
#login {
  div {
    box-sizing: border-box;
  }
  .mint-header {
    background: #fff;
  }
  .mintui-back {
    color: #888;
  }
  .mint-header-title {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
  }
  .content {
    text-align: center;
    padding: 1.26rem;
    .logo {
      text-align: center;
      display: flex;
      justify-content: center;
      margin-bottom: 1.672rem;
      img {
        width: 10.8131417rem;
        height: 8.59548254622rem;
      }
    }
  }
  .mint-cell-wrapper {
    border-radius: 24px;
    background: whitesmoke;
    margin-bottom: 1.672rem;
    font-size: 1rem;
  }
  .mint-cell {
    padding: 0 1.26rem;
  }
  .mint-cell-value {
    background-color: whitesmoke;
  }
  .mint-field-core {
    background-color: whitesmoke;
  }
  .mint-cell-text {
    font-size: 1rem;
    color: #26c2bf;
  }
  .mint-field .mint-cell-title {
    padding-left: 1.16rem;
    width: 60px;
  }
  .mint-button--large {
    display: block;
    width: 91%;
    border-radius: 24px;
    margin: 1.26rem;
  }
  .mint-button--primary {
    color: #fff;
    background-color: #26c2bf;
  }
  .mint-button--danger {
    color: #26c2bf;
    background-color: #fff;
    border: 0.1rem solid #26c2bf;
  }
  .mint-button{
    font-size: 1.1rem;
  }
  .user-action {
    display: flex;
    justify-content: center;
    margin-bottom: 1.12rem;
    .use-email {
      display: inline-block;
      font-size: 0.8rem;
      color: #a6a6b6;
    }
    .line {
      display: inline-block;
      width: 0.107rem;
      height: 1.2rem;
      background: #a6a6b6;
      border-radius: 0.1866716446rem;
    }
    .forget-pwd {
      display: inline-block;
      font-size: 0.8rem;
      color: #26c2bf;
    }
  }
  .login-type {
    margin: 1.36rem 0 1.3rem;
    .title {
      font-size: 1.1rem;
      color: #a6a6b6;
      margin-bottom: 1.32rem;
      text-align: center;
    }
    .type {
      display: flex;
      justify-content: center;
      .type-icon {
        margin: 1.12rem 1.52rem;
      }
    }
  }
  .user-agreement {
    font-size: 0.3546761247rem;
    color: #a6a6b6;
    text-align: center;
    a {
      text-decoration: underline;
      color: #26c2bf;
    }
  }
}
</style>